<template>
  <div class="block-sell f-fs-c-c">
    <router-link to="/goodsDetail/1" id="img-box" class="f-c-c">
      <img
        :src="data.imgs"
      />
    </router-link>
    <div id="info">
      <router-link id="head" to="/goodsDetail/1"
        >{{data.title}}</router-link
      >
      <div id="body" class="f-sb-c">
        <router-link :to="'/goodsDetail/' + data.id">共<b>{{data.totalComment}}</b>评价</router-link>
        <span>好评率<b>{{data.goodRatio}}</b></span>
        <span>月销<b>{{data.monthSell}}</b>部</span>
      </div>
      <div id="foot" class="f-sb-c">
        <div id="price"><b>￥{{data.price}}.00</b></div>
        <div id="status">
          <el-tag size="mini" type="success" effect="dark" v-if="data.isNew">
            new
          </el-tag>
          <el-tag size="mini" type="danger" effect="dark" v-if="data.isHot">
            hot
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "blockSell",
  props:["data"],
  components: {},
  data() {
    return {
        
    };
  },
};
</script>
<style lang="scss" scoped>
.block-sell {
  box-sizing: border-box;
  width: 226px;
  border: 1px solid $border-color-lighter;
  border-radius: $border-radius-small;
  overflow: hidden;
  background: $background-color-base;
  transition: 0.3s ease-in;
  &:hover {
    box-shadow: 5px 5px 5px #cccccc;
  }
}
#img-box {
  width: 226px;
  height: 200px;
  overflow: hidden;
  img {
    height: 90%;
    object-fit: cover;
    transition: 0.3s ease-in;
    &:hover {
      height: 100%;
    }
  }
}
#info {
  box-sizing: border-box;
  padding: 6px;
}
#head {
  @include text-ellipsis;
  font-weight: 900;
  font-size: 16px;
  line-height: 24px;
  height: 48px;
}
#body {
  margin: 5px 0;
  font: {
    size: 12px;
    color: $color-text-regular;
  }
  b{
      font-size: 14px;
      color: $theme-color;
  }
}
#foot {
  #price {
    color: $rmb-color;
    font-size: 20px;
  }
  #status {
    .el-tag:not(:last-child) {
      margin-right: 10px;
    }
  }
}
</style>